<template>
  <view class="material-storage-demo">
    <view class="header">
      <text class="title">物料价格存储演示</text>
      <text class="subtitle">展示四种物料的本地存储功能</text>
    </view>

    <!-- 物料价格展示 -->
    <view class="material-list">
      <view 
        v-for="materialType in materialTypes" 
        :key="materialType"
        class="material-item"
      >
        <view class="material-header">
          <text class="material-name">{{ materialNames[materialType] }}</text>
          <text class="material-type">{{ materialType }}</text>
        </view>
        
        <view class="price-info" v-if="storedPrices[materialType]">
          <view class="price-row">
            <text class="label">销售价:</text>
            <text class="value">{{ storedPrices[materialType].priceData.price || 'N/A' }}</text>
          </view>
          <view class="price-row">
            <text class="label">回购价:</text>
            <text class="value">{{ storedPrices[materialType].priceData.sellPrice || 'N/A' }}</text>
          </view>
          <view class="price-row">
            <text class="label">最高价:</text>
            <text class="value">{{ storedPrices[materialType].priceData.maxPrice || 'N/A' }}</text>
          </view>
          <view class="price-row">
            <text class="label">最低价:</text>
            <text class="value">{{ storedPrices[materialType].priceData.minPrice || 'N/A' }}</text>
          </view>
          <view class="update-time">
            更新时间: {{ storedPrices[materialType].updateTime }}
          </view>
        </view>
        
        <view class="no-data" v-else>
          <text>暂无数据</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button @click="refreshPrices" class="btn btn-primary">刷新价格</button>
      <button @click="clearAllPrices" class="btn btn-danger">清除所有</button>
      <button @click="exportPrices" class="btn btn-success">导出数据</button>
    </view>

    <!-- 存储状态信息 -->
    <view class="storage-info">
      <view class="info-item">
        <text class="info-label">存储状态:</text>
        <text class="info-value">{{ storageStatus }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">数据过期检查:</text>
        <text class="info-value">{{ expirationStatus }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { 
  MATERIAL_TYPES, 
  MATERIAL_NAMES,
  getAllMaterialPrices,
  clearAllMaterialPrices,
  isMaterialPriceExpired
} from '@/utils/materialStorage.js';

export default {
  name: 'MaterialStorageDemo',
  data() {
    return {
      materialTypes: Object.values(MATERIAL_TYPES),
      materialNames: MATERIAL_NAMES,
      storedPrices: {},
      storageStatus: '检查中...',
      expirationStatus: '检查中...'
    };
  },
  
  onLoad() {
    this.loadStoredPrices();
    this.checkStorageStatus();
  },
  
  methods: {
    // 加载存储的价格信息
    loadStoredPrices() {
      try {
        this.storedPrices = getAllMaterialPrices();
        console.log('已加载存储的价格信息:', this.storedPrices);
      } catch (error) {
        console.error('加载存储价格信息失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        });
      }
    },
    
    // 刷新价格信息
    refreshPrices() {
      this.loadStoredPrices();
      this.checkStorageStatus();
      uni.showToast({
        title: '已刷新',
        icon: 'success'
      });
    },
    
    // 清除所有价格
    clearAllPrices() {
      uni.showModal({
        title: '确认清除',
        content: '确定要清除所有物料价格信息吗？',
        success: (res) => {
          if (res.confirm) {
            try {
              clearAllMaterialPrices();
              this.storedPrices = {};
              this.checkStorageStatus();
              uni.showToast({
                title: '已清除',
                icon: 'success'
              });
            } catch (error) {
              console.error('清除价格信息失败:', error);
              uni.showToast({
                title: '清除失败',
                icon: 'error'
              });
            }
          }
        }
      });
    },
    
    // 导出数据
    exportPrices() {
      try {
        const exportData = {
          exportTime: new Date().toLocaleString('zh-CN'),
          materials: this.storedPrices
        };
        
        console.log('导出数据:', exportData);
        
        // 这里可以添加实际的导出逻辑，比如保存到文件或发送到服务器
        uni.showToast({
          title: '数据已导出到控制台',
          icon: 'success'
        });
      } catch (error) {
        console.error('导出数据失败:', error);
        uni.showToast({
          title: '导出失败',
          icon: 'error'
        });
      }
    },
    
    // 检查存储状态
    checkStorageStatus() {
      try {
        const hasData = Object.values(this.storedPrices).some(data => data !== null);
        this.storageStatus = hasData ? '有数据' : '无数据';
        
        // 检查过期状态
        const expiredMaterials = [];
        Object.values(MATERIAL_TYPES).forEach(materialType => {
          if (isMaterialPriceExpired(materialType)) {
            expiredMaterials.push(MATERIAL_NAMES[materialType]);
          }
        });
        
        if (expiredMaterials.length > 0) {
          this.expirationStatus = `${expiredMaterials.join('、')} 数据已过期`;
        } else {
          this.expirationStatus = '所有数据都是最新的';
        }
      } catch (error) {
        console.error('检查存储状态失败:', error);
        this.storageStatus = '检查失败';
        this.expirationStatus = '检查失败';
      }
    }
  }
};
</script>

<style scoped lang="scss">
.material-storage-demo {
  padding: 20rpx;
  background-color: #f5f5f6;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  
  .title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 24rpx;
    color: #666;
  }
}

.material-list {
  margin-bottom: 40rpx;
}

.material-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #eee;
  
  .material-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .material-type {
    font-size: 24rpx;
    color: #666;
    background-color: #f0f0f0;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
  }
}

.price-info {
  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    
    .label {
      font-size: 28rpx;
      color: #666;
    }
    
    .value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .update-time {
    font-size: 24rpx;
    color: #999;
    text-align: right;
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #eee;
  }
}

.no-data {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-bottom: 40rpx;
  
  .btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    border: none;
    
    &.btn-primary {
      background-color: #007aff;
      color: #fff;
    }
    
    &.btn-danger {
      background-color: #ff3b30;
      color: #fff;
    }
    
    &.btn-success {
      background-color: #34c759;
      color: #fff;
    }
  }
}

.storage-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}
</style>
